<template>
  <div class="z-slider-bar">
    <div class="z-slider-bar--wrap">
      <div
        class="z-slider-bar--item"
        v-for="(item, index) in list"
        :key="index"
        :class="{
          'is-active': item.code === active
        }"
        @click="onClick(item)"
      >
        <span v-if="item.icon" class="z-slider-bar--icon">
          <svg-icon :name="item.icon"></svg-icon>
        </span>
        <span v-if="item.name" class="z-slider-bar--label">{{ $t(item.name) }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Props } from './type'
import { useI18n } from 'vue-i18n'

defineOptions({
  name: 'z-slider-bar'
})

const props = defineProps<Props>()
const { t } = useI18n()
const $t = (text: string = '') => {
  return props.i18n && text ? t((props.i18nPrefix ? props.i18nPrefix + '.' : '') + text) : text
}

const emits = defineEmits<{
  click: [item: Props['list'][number]]
  change: [active: string | number]
}>()

const active = defineModel<string | number>({
  default: ''
})

const onClick = (item: Props['list'][number]) => {
  const oldVal = active.value
  active.value = item.code
  if (item.code !== oldVal) {
    emits('change', item.code)
  }
  emits('click', item)
}
</script>

<style lang="scss">
@use './style.scss';
</style>
